<template>
  <div>
    <div class="block">
      <span class="demonstration"
        >时间范围</span
      >
      <el-date-picker
        v-model="searchObj.value"
        type="datetimerange"
        align="right"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['12:00:00', '08:00:00']"
      >
      </el-date-picker>
      <el-button type="primary" @click="query">查询</el-button>
    </div>
    <el-card class="box-card">
      <com-echarts :sendOption="echartsData"> </com-echarts>
    </el-card>
  </div>
</template>

<script>
import ComEcharts from '../../components/comEcharts';
import moment from 'moment';
import {api_ordertotal} from '../../api/order';
export default {
  components:{
    ComEcharts
  },
  data() {
    return {
      searchObj:{
        value:[],//时间选择器
        date:'',
      },
      echartsData:{
         title:"订单统计",
      legend:['订单'],
      xData:[],
      series:[]
      }
    };
  },
  methods: {
    async query(){
      // 把value的值转成字符串格式给date
      this.searchObj.date=JSON.stringify(this.searchObj.value)
      // rst的数据orderTime: '2020-04-06 18:24:19', orderAmount: 19.88
     let rst= await api_ordertotal(this.searchObj);
    let xData=[];
    let arr=[];
     rst.data.forEach((item,index) => {
       xData.push(moment(item.orderTime).format("YYYY-MM-DD hh:mm:ss"));
       arr.push(item.orderAmount)
     });
     this.echartsData.xData=xData;
    this.echartsData.series=({
       name: '订单',
      type: 'line',
      stack: 'Total',
      data:arr
    })
     console.log(rst);
    }
  },
  mounted() {
    this.query();
  },
};
</script>

<style lang="less" scoped>
.con {
  display: flex;
  justify-content: space-between;
  text-align: center;
  .dindan {
    font-size: 50px;
    color: #0f95da;
  }
  .aa {
    color: red;
  }
  .cc {
    color: #1afa29;
  }
  ul > li:first-child {
    color: #ddd;
    margin-bottom: 5px;
  }
  ul > li:last-child {
    font-weight: 600;
  }
}
#main {
  min-width: 31.25rem;
  min-height: 31.25rem;
  // max-height: 500px;
}
#maychar {
  max-height: 500px;
  // max-height: 400px;
  height: 500px;
}
.box-card {
  margin-top: 20px;
}
</style>
